<template>

    <div class="wrapper">
        <div>
            <!-- 面包屑导航 -->
            <div class="build_top">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>宿舍楼层信息管理</el-breadcrumb-item>
                    <el-breadcrumb-item>宿舍楼宇管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="build_header">
                <el-card>
                    <el-row :gutter="220">
                        <!-- gutter是指定每个分栏的间隔 -->
                        <!-- 分栏一共占24格，给搜索框7格，添加按钮4格 -->
                        <el-col :span="7">
                            <!-- 搜索与添加区域 -->
                            <el-input placeholder="请输入搜索的楼栋号" clearable>
                                <el-button slot="append" icon="el-icon-search" @click="serachBulid"></el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">添加楼栋</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
            <div class="build_content">
                <el-table :data="
                tableData.slice(
                    (currentPage - 1) * pagesize,
                    currentPage * pagesize
                )" style="width: 100%" height="320" border>
                    <el-table-column fixed prop="bulid_name" label="楼宇号" width="150">
                    </el-table-column>
                    <el-table-column prop="head_name" label="负责人姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="120">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="300">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="220">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" icon="el-icon-edit" @click="openEditDialog(
                                scope.row.bulid_id,
                                scope.row.bulid_name,
                                scope.row.head_name,
                                scope.row.sex,
                                scope.row.phone,
                                scope.$index,
                                scope.row
                            )">修改</el-button>
                            <el-button size="mini" type="danger" icon="el-icon-delete"
                                @click="delBulid((scope.row.bulid_id))">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="build_foot">
                <el-pagination layout="  prev, pager, next, sizes, jumper" :page-sizes="[5, 10]" :page-size="pagesize"
                    :total="tableData.length" :pager-count="5" :current-page="currentPage"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog title="添加楼栋" :visible.sync="addDialogVisible" width="500px">
                <el-form :model="addForm" ref="addForm" label-width="90px" @submit.native.prevent>
                    <el-form-item label="楼栋编号" prop="bulidNumber">
                        <el-input placeholder="请输入楼栋编号" v-model="temp.bulid_name" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="负责人姓名" prop="principalName">
                        <el-input placeholder="请输入姓名" v-model="temp.head_name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-input placeholder="请输入性别" v-model="temp.sex"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input placeholder="请输入联系电话" v-model="temp.phone"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click.once="addBulid()">确 定</el-button>
                </span>
            </el-dialog>

            <el-dialog title="修改楼栋信息" :visible.sync="editDialogVisible" width="500px">
                <el-form :model="editForm" ref="editForm" label-width="90px" @submit.native.prevent>
                    <el-form-item label="楼栋编号" prop="bulidNumber">
                        <el-input placeholder="请输入楼栋编号" :disabled="true" v-model="editForm.bulid_name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="负责人姓名" prop="principalName">
                        <el-input placeholder="请输入姓名" v-model="editForm.head_name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-input placeholder="请输入性别" clearable v-model="editForm.sex"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input placeholder="请输入联系电话" clearable v-model="editForm.phone"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updataBulid()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: 'BuildingInformation',
    data() {
        return {
            bulid_id: null,
            tableData: [],
            currentPage: 1, //展示第几页
            pagesize: 5, //每页的数据条数
            usernameSearchInput: "",
            temp: {
                bulid_name: "",
                head_name: "",
                sex: "",
                phone: null,
            },
            addDialogVisible: false,
            addForm: '',
            editDialogVisible: false,
            editForm: {
                build_id: null,
                bulid_name: "",
                head_name: "",
                sex: "",
                phone: null,
            },
        }
    },
    methods: {
        getAllBulids() {
            axios.get('http://127.0.0.1/bulids').then(res => {
                this.tableData = res.data;
            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        },
        serachBulid() { },

        addBulid() {
            let params = {
                bulid_name: this.temp.bulid_name,
                head_name: this.temp.head_name,
                sex: this.temp.sex,
                phone: this.temp.phone
            }
            axios.post('http://127.0.0.1/bulids', params).then(res => {
                console.log(res.data);
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                this.addDialogVisible = false;
                this.clearAddForm()
                this.getAllBulids()
            }).catch(err => {
                console.log("获取数据失败" + err);
                this.$message({
                    type: 'success',
                    message: '添加失败!'
                });
            })
        },
        updataBulid() {
            let bulid_id = this.editForm.bulid_id

            let params = {
                head_name: this.editForm.head_name,
                sex: this.editForm.sex,
                phone: this.editForm.phone
            }
            console.log(bulid_id);
            axios.put(`http://127.0.0.1/bulids/${bulid_id}`, params).then(res => {
                console.log(res.data);
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.editDialogVisible = false
                this.getAllBulids()
            }).catch(err => {
                console.log("获取数据失败" + err);
                this.$message({
                    type: 'success',
                    message: '修改失败!'
                });
            })
        },
        delBulid(bulid_id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                axios.delete(`http://127.0.0.1/bulids/${bulid_id}`).then(res => {
                    console.log(res.data);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getAllBulids()
                }).catch(err => {
                    console.log("获取数据失败" + err);
                    this.$message({
                        message: '删除失败'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        }, //点击改变页数和数据
        handleSizeChange(val) {
            this.pagesize = val;
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
        }, //点击改变其他页数据

        clearAddForm() {
            this.temp = {
                bulid_name: "",
                head_name: "",
                sex: "",
                phone: null,
            }
        },
        clearEditForm() {
            this.temp = {
                head_name: "",
                sex: "",
                phone: null,
            }
        },
        openAddDialog() {
            this.clearAddForm();
            this.addDialogVisible = true;
        },
        openEditDialog(bulid_id, bulid_name, head_name, sex, phone) {
            this.editForm = { bulid_id, bulid_name, head_name, sex, phone }
            console.log(this.editForm.bulid_id);
            this.editDialogVisible = true
        },
    },
    created() {
        this.getAllBulids()
    },
}

</script>
<style scoped>
.wrapper {
    margin: 0px;
    padding: 0px;
}

.build_top {
    margin-left: -20px;
    margin-top: -20px;
    width: 100%;
    height: 40px;
    background-color: #e3e3e3;
}

.build_content {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    background-color: white;
}

.build_foot {
    margin-left: 55%;
}

.el-input {
    width: 300px;
}
</style>